<!-- 任务单详情弹窗 -->
<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="600px" :title="`${drawerProps.title}`">
    <el-space direction="vertical">
      <el-descriptions :column="2" title="订单信息" border>
        <el-descriptions-item width="400" label="订单总额">{{ drawerProps.row.orderInfo?.totalAmount }}</el-descriptions-item>
        <el-descriptions-item width="400" label="收件人">{{ drawerProps.row.orderInfo?.receiverName }}</el-descriptions-item>
        <el-descriptions-item width="400" label="收件地址">{{
          drawerProps.row.orderInfo?.receiverAddress?.addressString
        }}</el-descriptions-item>
        <el-descriptions-item width="400" label="收件人电话">{{ drawerProps.row.orderInfo?.receiverPhone }}</el-descriptions-item>
        <el-descriptions-item width="400" label="发票需求">{{ optInvoiceText }}</el-descriptions-item>
        <el-descriptions-item width="400" label="订单备注">{{ drawerProps.row.orderInfo?.orderRemark }}</el-descriptions-item>
        <el-descriptions-item width="400" label="期望送达时间">{{
          drawerProps.row.orderInfo?.expDeliveryTime
        }}</el-descriptions-item>

        <el-descriptions-item width="400" label="商品名称">{{
          drawerProps.row.orderInfo?.orderItems[0].goodsName
        }}</el-descriptions-item>
        <el-descriptions-item width="400" label="商品单价">{{
          drawerProps.row.orderInfo?.orderItems[0].goodsPrice
        }}</el-descriptions-item>
        <el-descriptions-item width="400" label="计量单位">{{
          drawerProps.row.orderInfo?.orderItems[0].measureUnit
        }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions :column="2" title="任务单信息" border>
        <el-descriptions-item width="400" label="配送员姓名">{{
          drawerProps.row?.courierInfo?.courierName || "无"
        }}</el-descriptions-item>
        <el-descriptions-item width="400" label="创建时间">{{ drawerProps.row!.createTime }}</el-descriptions-item>
        <el-descriptions-item width="400" label="任务类型">
          <el-tag type="success">{{ taskTypeText }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item width="400" label="任务状态">
          <el-tag v-if="drawerProps.row.taskStatus === 0" type="info">待货</el-tag>
          <el-tag v-if="drawerProps.row.taskStatus === 1" type="success">待分配</el-tag>
          <el-tag v-if="drawerProps.row.taskStatus === 2" type="warning">待领货</el-tag>
          <el-tag v-if="drawerProps.row.taskStatus === 3" type="danger">待配送</el-tag>
          <el-tag v-if="drawerProps.row.taskStatus === 4">已完成</el-tag>
        </el-descriptions-item>
        <el-descriptions-item width="400" label="任务单备注">{{ drawerProps.row!.taskRemark }}</el-descriptions-item>
        <el-descriptions-item width="400" label="发票号">{{ drawerProps.row!.invoiceId }}</el-descriptions-item>
      </el-descriptions>
    </el-space>
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
      <h4>回执填写</h4>
      <el-form-item prop="customSatisfaction">
        <template #label>
          <span style="width: 100px; font-size: 15px; font-weight: bold">客户满意度</span>
        </template>
        <el-rate v-model="drawerProps.row!.customSatisfaction" :texts="['差', '一般', '普通', '很好', '极好']" show-text />
      </el-form-item>
      <el-form-item prop="customEvaluation">
        <template #label>
          <span style="display: inline-block; width: 100px; font-size: 15px; font-weight: bold">客户评价</span>
        </template>
        <el-input
          v-model="drawerProps.row!.customEvaluation"
          type="textarea"
          :autosize="{ minRows: 2 }"
          placeholder="请输入客户评价内容"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="DetailDrawer">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { Substation } from "@/api/interface";
import { computed } from "vue";
// import { getUserInfo } from "@/api/modules/user";

const rules = reactive({
  customSatisfaction: [{ required: true, message: "请填写客户满意度" }],
  customEvaluation: [{ required: true, message: "请填写客户评价" }]
});

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<Substation.ResTaskOrderList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps) => {
  drawerProps.value = params;
  // if (drawerProps.value.row.taskStatus && drawerProps.value.row.taskStatus > 1) {
  //   const result = await getUserInfo({ userId: drawerProps.value.row.courierId ?? -1 });
  //   drawerProps.value.courierName = result.data.name;
  // }
  // if (!drawerProps.value.row.courierInfo?.courierName) {
  //   drawerProps.value.row!.courierInfo!.courierName = "无";
  // }
  drawerVisible.value = true;
};

const taskTypeText = computed(() => {
  switch (drawerProps.value.row?.taskType) {
    case 1:
      return "送货收款";
    case 2:
      return "退货";
    case 3:
      return "换货";
    default:
      return "";
  }
});

const optInvoiceText = computed(() => {
  switch (drawerProps.value.row.orderInfo?.optInvoice) {
    case 0:
      return "不需要";
    case 1:
      return "需要";
    default:
      return "";
  }
});

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      // api: editTaskOrder
      await drawerProps.value.api!({
        taskId: drawerProps.value.row.taskId,
        customSatisfaction: drawerProps.value.row.customSatisfaction,
        customEvaluation: drawerProps.value.row.customEvaluation
      });
      ElMessage.success({ message: `填写成功` });
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>
